<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style type="text/css">
    div {
        /* transition-duration: 1s; */
        /* transition-timing-function: linear; */
        /* transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55); */
        /* transition-timing-function: steps(10,end); */
        /* transition-delay: 0s, 1s, 0s; */
        /* transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s; */
        transition: all 1s ease 0s;
        width: 200px;
        height: 200px;
        background-color: white;
        border: 1px solid green;
    }
    div:hover {
        background-color: black;
        color: white;
        margin-left: 50px;
    }
    div {
        /* animation-name: myani;
        animation-duration: 1s;
        animation-timing-function: ease-in; */
        /* animation-iteration-count: infinite; */
        /* animation-direction: alternate; */
        /* animation-play-state: paused; */
        /* animation-fill-mode: forwards; */
        /* animation-iteration-count: 4; */
        animation: myani 1s ease 2 alternate 0s both;
        width: 200px;
        height: 200px;
        background-color: teal;
        border: 1px solid tomato;
    }
    /* @keyframes myani {
        0% {
            background-color: white;
            margin-left: 0px;
        }
        50% {
            background-color: black;
            margin-left: 100px;
        }
        100% {
            background-color: white;
            margin-left: 0px;
        }
    } */
    @keyframes myani {
        from {
            background-color: teal;
            margin-left: 0px;
        }
        to {
            background-color: salmon;
            margin-left: 100px;
        }
    }
    body {
        margin: 0;
    }
    table {
        margin: 0 auto;
        width: 100%;
        border-spacing: 0;
    }
    .header {
        height: 120px;
        background-color: olivedrab;
    }
    .aside {
        width: 200px;
        height: 500px;
        background-color: palevioletred;
    }
    .section {
        width: 760px;
        height: 500px;
        background-color: maroon;
    }
    .footer {
        height: 120px;
        background-color: greenyellow;
    }

    body {
        /* width: 960px; */
        width: auto;
        margin: 0 auto;
        color: white;
    }
    header {
        height: 120px;
        background-color: lightcoral;
    }
    aside {
        /* width: 200px; */
        width: 20%;
        height: 500px;
        background-color: palevioletred;
        float: left;
    }
    section {
        /* width: 760px; */
        width: 80%;
        height: 500px;
        background-color: rebeccapurple;
        float: right;
    }
    footer {
        height: 120px;
        background-color: royalblue;
        clear: both;
    }
    </style>
    <header>
        header
    </header>

    <aside>
        aside
    </aside>

    <section>
        section
    </section>

    <footer>
        footer
    </footer>

    <table border="0">
        <tr>
            <td colspan="2" class="header">header</td>
        </tr>
        <tr>
            <td class="aside">aside</td>
            <td class="section">section</td>
        </tr>
        <tr>
            <td colspan="2" class="footer">footer</td>
        </tr>
    </table>
    <div>我是HTML5</div>
    <div>
        级开始东方精工拉什福德复工卡领导管
        <p>健康撒地和人结构IoT包括美国</p>
    </div>
</body>
</html>